<template>
    <div class="main">
        <div class="museum-list">
            <div
                class="item"
                v-for="item in museumList.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
                @click="openLinkInNewWindow(item)"
            >
                <div class="name">{{ item.museumName }}</div>
                <div class="value">{{ item.value }}人次</div>
            </div>
        </div>
        <div class="museum-pagination">
            <el-pagination
                background
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="pageSize"
                layout="total,prev,pager,next"
                :total="museumList.length"
            >
            </el-pagination>
        </div>
    </div>
</template>

<script>
import {currentGET} from "api";

export default {
    data() {
        return {
            museumList: [],
            currentPage: 1,  // 当前页码
            pageSize: 9,  // 每页显示的行数
            tableData: [],  // 表格数据
        }
    },
    created() {
        this.getData();
    },
    mounted() {},
    beforeDestroy() {},
    methods: {
        getData() {
            let cityId = this.$route.query.cityId;
            currentGET("getMuseumList", {cityId})
                .then((res) => {
                    if (res.success) {
                        this.museumList = res.data;
                        console.log(this.museumList, "this.museumList");
                    } else {

                    }
                });

        },
        // 页面切换方法
        handleCurrentChange(val) {
            this.currentPage = val;
        },
        // 跳转到博物馆页面
        openLinkInNewWindow(item) {
            console.log(JSON.parse(JSON.stringify(item)), "openLinkInNewWindow");

            // 修改导航当前页面类型
            this.$store.commit('museumInformation/SET_CurrentPage', 2);

            this.$router.push({
                path: '/revolutionaryMemorial',
                query: {
                    id: item.cityId,
                    cityId: item.orgId,
                    name: item.museumName,
                }
            });
        },
    },
};
</script>
<style lang='scss' scoped>
.main {
  position: relative;
  width: 100%;
  //height: 205px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  margin: 22px 0 0 46px;

    .museum-list {
        display: flex;
        align-content: flex-start;
        flex-wrap: wrap;
        width: 730px;
        height: 517px;

        .item {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 228px;
            height: 160px;
            margin-top: 15px;
            margin-left: 15px;
            background-image: url("../../assets/img/museum-data.png");
            background-size: cover;
            cursor: pointer;

            .name {
                text-align: center;
                white-space: nowrap; /* 禁止换行 */
                overflow: hidden; /* 超出部分隐藏 */
                text-overflow: ellipsis; /* 使用省略号表示超出部分 */
                /* 可选：设置元素宽度 */
                width: 180px;
                color: #c8e4fa;
            }

            .value {
                color: #edbe7e;
                margin-top: 20px;
                font-weight: 600;
            }
        }
    }

    .museum-pagination {
        display: flex;
        justify-content: center;
        width: 730px;
        padding-top: 20px;
    }
}

::v-deep .el-pagination span{
    //background: #574225;
    //border: 1px solid #FFBB46;
    color: #FFFFFF;
    //padding: 0 5px;
    //line-height: 2;
    //border-radius: 4px;
}
::v-deep .el-pagination.is-background .el-pager li:not(.disabled){
    background-color: #8ebfe8;
    color: #fff;
}
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #2b394d;
    color: #fff;
}
::v-deep .el-pagination.is-background .btn-prev {
    background-color: #8ebfe8;
    color: #fff;
}
::v-deep .el-pagination.is-background .btn-next {
    background-color: #8ebfe8;
    color: #fff;
}

</style>
